<template>
  <view class="">
    <nav-bar title="设置密码" />
    <view class="resetPassword flexRSC">
      <view class="title" v-if="curIndex == 0"
        >您正在使用会员充值，为保证您的账户安全，请设置会员余额支付密码</view
      >
      <view class="title" v-else>请再次填写以确认</view>
      <input
        type="number"
        class="value-input"
        v-model="password"
        maxlength="6"
        :focus="true"
        @input="changeValue"
      />
      <view class="input-warp">
        <view class="password-input">
          <view class="item" v-for="(item, index) in 6" :key="index">
            <view v-if="password.length >= index + 1" class="dot"></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { updateOrInserPassword } from "@/service/api/sp-store/storeValue";
export default {
  data() {
    return {
      password: "",
      rePassword: "",
      curIndex: 0,
    };
  },
  methods: {
    checkPassword(value) {
      let reg = /^(\d)\1{5}$/; // 不重复6位 类似111111,222222
      let str = "0123456789_9876543210"; // str.indexOf(value) > -1 不连续判断 类似123456
      if (value.length !== 6 || reg.test(value) || str.indexOf(value) > -1) {
        wx.showToast({
          title: `为了你的密码安全，请不要使用6位相同或连续的数字`,
          icon: "none",
          duration: 3000,
        });
        return false;
      }
      return true;
    },
    changeValue(e) {
      let { password, rePassword, curIndex } = this;
      if (!password || (password && password.length < 6)) {
        return;
      }
      if (curIndex === 0) {
        if (this.checkPassword(password)) {
          (this.rePassword = password),
            (this.curIndex = 1),
            (this.password = "");
        } else {
          (this.password = ""), (this.curIndex = 0);
        }
        return;
      }
      if (rePassword === password) {
        this.confirm();
      } else {
        wx.showToast({
          title: `两次输入密码不一致`,
          icon: "none",
          duration: 3000,
        });
        (this.rePassword = ""), (this.curIndex = 0), (this.password = "");
      }
    },
    confirm() {
      wx.showLoading({ title: "设置中...", mask: true });
      let data = {
        oldPassword: "",
        password: this.rePassword, //md5(this.data.firstPassword) 注释md5
        reSetStatus: false,
      };
      updateOrInserPassword(data)
        .then((res) => {
          wx.hideLoading();
          wx.showModal({
            title: "提示",
            content: "设置支付密码成功",
            showCancel: false,
            success: (res) => {
              if (res.confirm) {
                uni.$emit('updateData',{setPassWord:true})
                this.$myTool.jumpPage("back");
              }
            },
          });
        })
        .catch(() => {
          wx.hideLoading();
        });
    },
  },
};
</script>
<style lang="scss" scoped>
/*设置密码*/
page {
  background-color: #fff;
}
.resetPassword {
  background-color: #fff;
  width: 100vw;
  .value-input {
    position: absolute;
    top: -100vh;
    left: 0;
  }
  .title {
    margin-top: 100rrpx;
    margin-bottom: 70rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    padding: 10rpx 20rpx;
  }
  .tipTitle {
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(255, 81, 75, 1);
    margin-bottom: 20rpx;
  }
  ._h3 {
    font-size: 34rpx;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }
}
.input-warp {
  width: 100%;
  display: flex;
  justify-content: center;
}

.password-input {
  height: 94rpx;
  border: 2rpx solid #000;
  display: flex;

  & .item {
    height: 92rpx;
    width: 92rpx;
    border-right: 2rpx solid #000;

    display: flex;
    justify-content: center;
    align-items: center;

    &:last-child {
      border-right: none;
    }

    & .dot {
      width: 24rpx;
      height: 24rpx;
      background-color: #000;
      border-radius: 24rpx;
    }
  }
}
</style>
